<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
        <title>可选项</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/FileSaver.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space4">
        <br/><br/>
        <div class="layui-col-md5">
            <form class="layui-form" id="mainForm">
                <div class="layui-form-item">
                    <label for="kid" class="layui-form-label">
                        类型
                    </label>
                    <div class="layui-input-inline" id="kview"></div>
                </div>
                <br/>
                <div class="layui-form-item">
                <label for="fid" class="layui-form-label">
                    字段
                </label>
                <div class="layui-input-inline">
                    <div id="fview"></div>
                </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button type="button" class="layui-btn layui-btn-normal" lay-filter="save" lay-submit="">
                        保存
                    </button>
                    <button type="button" class="layui-btn layui-btn-danger" lay-filter="del" lay-submit="">
                        删除
                    </button>
                    <button class="layui-btn layui-btn-warm" type="button" onclick="backup();">
                        <i class="icon iconfont">&#xe714;</i>
                    </button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <div style="position: relative; display: inline;">
                        <input id="upload-input" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0; display: inline;" type="file" accept="application/json" onchange="recovery(this)" />
                        <!-- 自定义按钮效果 -->
                        <div style="text-align: top; display: inline;">
                            <i class="layui iconfont">&#xe71d;</i>
                        </div>
                    </div>
                </div>
            </form>
       
            <br/>
            <form class="layui-form" id="nextForm">
                <div class="layui-form-item">
                    <label for="val" class="layui-form-label">
                        值
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="val" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="tit" class="layui-form-label">
                        标题
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" name="tit" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        添加
                    </button>
                </div>
            </form>
        </div>
        <div class="layui-col-md5">
            <table id="tab1" lay-filter="tab"></table>
        </div>
    </div>
    <hr class="layui-bg-cyan">
    <br/>
    <div class="layui-row">
        <form class="layui-form" id="otherForm">
            <div class="layui-form-item">
                <label for="kid" class="layui-form-label">
                    类型
                </label>
                <div class="layui-input-inline" id="aview"></div>
            </div>
            <div class="layui-form-item">
                <label for="val" class="layui-form-label">
                    档号策略
                </label>
                <div class="layui-input-inline">
                   <select name="dh">
                       <option value="0">无</option>
                       <option value="1">临时</option>
                       <option value="2">构成</option>
                   </select>
                </div>
                <button  class="layui-btn" lay-filter="save" lay-submit="">
                    保存
                </button>
            </div>
            <div class="layui-form-item">
                <label for="tit" class="layui-form-label">
                    构成规则
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="tit" lay-verify="required"
                    autocomplete="off" class="layui-input">
                </div>
                <button  class="layui-btn" lay-filter="add" lay-submit="">
                    添加
                </button>
            </div>
        </form>
        <br>
        字段计算公式
    </div>
  </div>
  <script type="text/html" id="kdemo">
    <select name="kid" lay-filter="kinType">
        {{#  layui.each(kin, function(index, item){ }}
        <option value="{{item.kid}}">{{item.title}} - {{item.kname}}</option>
        {{#  }); }}
        {{#  if(kin.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script type="text/html" id="fdemo">
    <select name="fid" lay-filter="fType">
        {{#  layui.each(fie, function(index, item){ }}
        <option value="{{item.field}}">{{item.title}}</option>
        {{#  }); }}
        {{#  if(fie.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script type="text/html" id="ademo">
    <select name="kid" lay-filter="allType">
        {{#  layui.each(all, function(index, item){ }}
        <option value="{{item.kid}}">{{item.kname}}</option>
        {{#  }); }}
        {{#  if(all.length === 0){ }}
            无数据
        {{#  } }}
    </select>
  </script>
  <script type="text/html" id="bar">
    <a lay-event="update" title="编辑" href="javascript:;">
        <i class="layui-icon">&#xe642;</i></a>
    <a lay-event="delete" title="删除" href="javascript:;">
        <i class="layui-icon">&#xe640;</i></a>
    <a lay-event="moveup" title="上移" href="javascript:;">
        <i class="layui-icon">&#xe619;</i></a>
    <a lay-event="movedown" title="下移" href="javascript:;">
        <i class="layui-icon">&#xe61a;</i></a>
  </script>
  <script>
    var kin;
    var ki = [];
    var fie=[];
    var datab;
    var o = {};
    var all=[];
    layui.config({
        base: '../lib/layui/layui-expand/' //插件路径
    }).extend({
        enhanceform: 'enhanceform'
    });
    layui.use(['form','table', 'laytpl', 'enhanceform'], function(){
      var form = layui.form
      ,table = layui.table
      ,laytpl = layui.laytpl
      ,enhanceForm = layui.enhanceform;
      var getTplk = kdemo.innerHTML
      ,kview = document.getElementById('kview')
      ,getTplf = fdemo.innerHTML
      ,fview = document.getElementById('fview')
      ,getTpla = ademo.innerHTML
      ,aview = document.getElementById('aview');
    //   axios.get("/api/get_k").then(res=>{
          all = [];
          laytpl(getTpla).render(all, function(html){
              aview.innerHTML = html;
          })
    //   })
      axios.get("/api/get_o_k").then(res=>{

            kin = res.data;
            laytpl(getTplk).render(kin, function(html){
                kview.innerHTML = html;
            });
            ki[0] = kin[0];
            for (var i in kin[0].head){
                if(kin[0].head[i].type == "2"){
                    fie.push(kin[0].head[i])
                }
            }
            laytpl(getTplf).render(fie, function(html){
                fview.innerHTML = html;
            });
            form.render('select');
            axios.post("/api/get_o", {kid:kin[0].kid, okey:fie[0].field}).then(res=>{
                if(res.data.length!=0){
                    o = res.data[0];
                    datab = o.ovalue;
                }else{
                    o.oid = 0;
                    datab = [];
                }
                table.render({
                    elem:'#tab1'
                    ,width: 540
                    ,height: 256
                    ,cols: [[
                    {field: 'val', title: '值'}
                    ,{field: 'tit', title: '标题'}
                    ,{field: '', title: '操作', toolbar: '#bar'}
                    ]]
                    ,data: datab
                })
            })
            
      })

    //选择类型
    form.on('select(kinType)', function(data){   
        var val = Number(data.value);
        ki = kin.filter(item=>{
            return item.kid == val;
        });
        fie = [];
        for (var i in ki[0].head){
            if(ki[0].head[i].type == "2"){
                fie.push(ki[0].head[i])
            }
        }
        laytpl(getTplf).render(fie, function(html){
            fview.innerHTML = html;
        });
        form.render('select');
        axios.post("/api/get_o", {kid: Number(ki[0].kid), okey:fie[0].field}).then(res=>{
            if(res.data.length!=0){
                o = res.data[0];
                datab = o.ovalue;
            }else{
                o.oid = 0;
                datab = [];
            }
            table.render({
                elem:'#tab1'
                ,width: 540
                ,height: 256
                ,cols: [[
                {field: 'val', title: '值'}
                ,{field: 'tit', title: '标题'}
                ,{field: '', title: '操作', toolbar: '#bar'}
                ]]
                ,data: datab
            })
        })
        return false;
    });
    //选择字段
    form.on('select(fType)', function(data){
        axios.post("/api/get_o", {kid: Number(ki[0].kid), okey:data.value}).then(res=>{
            if(res.data.length!=0){
                o = res.data[0];
                datab = o.ovalue;
            }else{
                o.oid = 0;
                datab = [];
            }
            table.render({
                elem:'#tab1'
                ,width: 540
                ,height: 256
                ,cols: [[
                {field: 'val', title: '值'}
                ,{field: 'tit', title: '标题'}
                ,{field: '', title: '操作', toolbar: '#bar'}
                ]]
                ,data: datab
            })
        })
    })
    //添加选项
    form.on('submit(add)', function(data) {
        var formData = data.field;
        datab.push(formData);
        table.reload('tab1', {
            data: datab
        })
        return false;
    });
    //保存
    form.on('submit(save)', function(data) {
        var formData = data.field;
        datab = layui.table.cache['tab1'];
        console.log(o)
        if(o.oid === 0){
            var a = {
                kid: Number(formData.kid),
                okey: formData.fid,
                ovalue: datab
            };
            axios.post('/api/add_o', a).then(res=>{
                o = res.data;
                layer.msg('保存成功', {icon: 1,time:1000});
            });
        }else {
            var b = {
                oid: o.oid,
                ovalue: datab
            };
            axios.post('/api/up_o', b).then(res=>{
                layer.msg('保存成功', {icon: 1,time:1000});
            });
        }
        
        
        return false;
    });
    //删除
    form.on('submit(del)', function(data) {
        var formData = data.field;
        let qval = Number(formData.qid);
        layer.confirm('确认要删除档案类型吗？',function(index){
            axios.post('/api/del_o', {oid: o.oid}).then(res=>{
                console.log(res.data);
                datab = [];
                table.reload('tab1',{
                    data: datab
                })
                layer.msg('档案类型已删除', {icon: 1,time:1000});
            });
        });
        
        return false;
    });
      table.on('tool(tab)', function(obj){
        var index = Number(obj.tr[0].dataset.index);
        switch (obj.event) {
        case 'moveup':
            var data = obj.data;
            if(index!=0){
                datab[index] = datab.splice(index-1, 1, datab[index])[0];
            }else{
                datab.push(datab.shift());
            }
            table.reload('tab1',{
                data: datab
            })
            break;
        case 'movedown':
            if(index!=datab.length-1){
                datab[index] = datab.splice(index+1, 1, datab[index])[0];
            }else{
                datab.unshift(datab.splice(index,1)[0]);
            }
            table.reload('tab1',{
                data: datab
            })
            break;
        case 'delete':
            layer.confirm('确认要删除行吗？',function(){
                datab.splice(index, 1);
                obj.del();
                layer.msg('删除成功', {icon: 1, time: 1000});
            });
            break;
        case 'update':
            datab.splice(index, 1);
            obj.del();
            var data = obj.data;
            var enhance = new enhanceForm({
                elem: '#nextForm' //表单选择器
            });
            enhance.filling({val: data.val, tit: data.tit})
            break;
        }
        })
    })

    function backup() {
        let content = JSON.stringify(layui.table.cache['tab1']);
        var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
        saveAs(blob, "kind.json");
        return false;
    };
    function recovery(input) {
        var reader = new FileReader();
        var file = input.files[0];
        reader.readAsText(file);
        reader.onload = function() {
            layui.use('table', function(){
                datab = JSON.parse(reader.result)
                layui.table.reload('tab1', {
                    data: datab
                })
            })
            
        }
        return false;
    };
  </script>
</body>
</html>